<example name="Code">
  <file name="index.html">
    <div id="code"></div>
  </file>

  <file name="index.js">
    import React from 'react';
    import {render} from 'react-dom';

    import Code from '@jetbrains/ring-ui/components/code/code';

    const container = document.getElementById('code');
    const demo = (
      <Code
        code={`
          import React, {Component} from 'react';
          import ChildComponent from './child-component';

          const MyComponent = () => (
            <div className="class">
              <ChildComponent prop="value" />
            </div>
          );
        `}
      />
    );

    render(demo, container);
  </file>
</example>

<example name="Code as tagged template">
  <file name="index.html">
    <div id="code"></div>
  </file>

  <file name="index.js">
    import React from 'react';
    import {render} from 'react-dom';

    import {code} from '@jetbrains/ring-ui/components/code/code';

    const container = document.getElementById('code');
    const demo = code`
      import React from 'react';
      import {code} from '@jetbrains/ring-ui/components/code/code';

      const el = code\`some('js')\`;
    `;

    render(demo, container);
  </file>
</example>

